// 引入路径模块
const path = require('path')
//压缩CSS的格式
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//让CSS单独生成文件的插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//生成引入css，js的html
const HtmlWebpackPlugin = require('html-webpack-plugin');
//语法规范检测
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
//拷贝的插件
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    // 模式
    mode: "production",
    // 配置入口路径
    entry: path.resolve(__dirname, "./src/index.js"),
    // 配置出口路径
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: './js/build.js'
    },
    // loader加载器配置
    module: {
        //css的loader加载器
        rules: [{
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
        }, {
            //less的loader加载器
            test: /\.less/i,
            use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
        }, {
            //图片的加载器，由webpack5添加替代了url-loader和file-loader
            test: /\.(img|png|webp|jpg)$/,
            type: "asset",
            parser: {
            dataUrlCondition: {
                    maxSize: 30 * 1024,
                },
            },
            generator: {
                filename: "images/[name][ext]"
            }
        },
            // {
            //     test:/\.html$/i,
            //     use:{
            //         loader:'html-loader'
            //     }
            // }
        ]
    },
    //添加压缩css文件的优化配置
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ]
    },
    // 插件
    plugins: [
        //用于在编译js的时候将css部分打包成单独的css文件
        new MiniCssExtractPlugin({
            //打包后的位置
            filename: "./css/main.css"
        }),
        // 用于在构建打包css，js，的时候生成引入该文件的html
        new HtmlWebpackPlugin({
            //静态资源模板的路径
            template:path.resolve(__dirname,"./public/index.html"),
            //出口路径
            filename:"index.html",
            // 压缩的配置
            minify: {
                //合并空白
                collapseWhitespace: true,
                //保持单标签的斜杠
                keepClosingSlash: true,
                //移除字符串中的注释
                removeComments: true,
                //删除多余的属性
                removeRedundantAttributes: true,
                //删除script标签的type属性
                removeScriptTypeAttributes: true,
                //删除link标签的type属性
                removeStyleLinkTypeAttributes: true,
                //使用简短的文档属性
                useShortDoctype: true
              }
        }),
        // ESLint格式规范检测
        new ESLintWebpackPlugin({
            // 是否补全分号
            fix:true
        }),
        // 拷贝，用于配置赋值静态资源文件夹
        new CopyWebpackPlugin({
            patterns:[{
                //入口路径
                from: path.resolve(__dirname, "./public"),
                //出口路径
                to:"public",
                globOptions:{
                //配置忽略，忽略所有文件夹的index.html
                ignore:["**/index.html"]
                }
            },]
        })
    ],
};